Kevin-Blog

严格模式


ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

严格模式主要有以下限制：

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 不能对只读属性赋值，否则报错
  • 不能使用前缀 0 表示八进制数，否则报错
  • 不能删除不可删除的属性，否则报错
  • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • eval和arguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
  • 增加了保留字（比如protected、static和interface）

上面这些限制，模块都必须遵守。由于严格模式是 ES5 引入的，不属于 ES6，所以请参阅相关 ES5 书籍

其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this

export


export 可以同时导出多个

注意: export 后面跟着的 {} 不是一个对象

1. 固定写法

export {xxx, xxx, ……}

2. 导出变量

  • 写法一

let name = 'Kevin';

export {name}

// 错误写法

let name = 'Kevin';

export name

  • 写法二

let name = 'Kevin';
let age = 18;
let obj = {a: 1, b: 2};
let fn = x => {
    console.log(x)
};

export {name, age, obj, fn}

  • 写法三

export let name = 'Kevin';

3. 导出对象

let obj = {a: 1, b: 2};

export {name, age, obj}

// 错误写法

let obj = {a: 1, b: 2};

export obj

// 错误写法

export {{a: 1, b: 2}}

4. 导出函数

  • 导出的函数不能是匿名函数

  • 写法一

function fn(x) {
    console.log(x)
}

export {fn}

// 错误写法

function fn(x) {
    console.log(x)
}

export f

  • 写法二

export function fn(x) {
    console.log(x)
}

// 错误写法

export x => {
    console.log(x)
}

5. as

  • 给导出的变量或函数取别名，那么在导入的时候就要以该别名进行导入

let name = 'Kevin';

export {name as username}

let name = 'Kevin';
let num = 18;
let obj = {a: 1, b: 2};

function fn(x) {
    console.log(x)
}

export {
    name as username,
    num as age,
    obj as userinfo,
    fn as userfn
}

6. 同时导出多个

  • export 可以同时导出多个

let name = 'Kevin';
let num = 18;
let obj = {a: 1, b: 2};

function fn(x) {
    console.log(x)
}

export {name, num as age}
export {obj}
export {fn}

7. 同时使用 export 和 export default

let name = 'Kevin';
let age = 18;
let obj = {a: 1, b: 2};

export {name, age}
export default obj

export default


export default 默认导出，只允许导出一个

1. 固定写法

export default xxx

2. 导出变量

  • 写法一

let name = 'Kevin';

export default name

  • 写法二

export default 'Kevin'

3. 导出对象

  • 写法一

let obj = {a: 1, b: 2};

export default obj

  • 写法二

export default {a: 1, b: 2}

4. 导出函数

  • 如果使用 export default 导出函数，那么默认导出匿名函数

  • 写法一

let fn = function (x) {
    console.log(x)
};

export default fn

  • 写法二

export default function (x) {
    console.log(x)
}

5. 同时使用 export 和 export default

let name = 'Kevin';
let age = 18;
let obj = {a: 1, b: 2};

export {name, age}
export default obj

import


1. 导入使用 export 导出的参数

  • import 导入使用 export 导出的参数时必须加 {} ，写法二除外

  • 固定写法

import {xxx, xxx, ……} from '路径'

  • 写法一

import {name} from './test.js'

import {name, age, json, foo} from './test.js'

  • 写法二

    • 使用 * 一次性导入所有参数，但是要使用 as 起一个别名

import * as test from './test.js'

  • as -> 起别名

import {name as username, num as age} from './test.js'

console.log(username, age)

2. 导入使用 export default 导出的参数

  • import 导入使用 export default 导出的参数时无需加 {}

  • 无法使用 as，如果使用就会报错

  • 固定写法

// 任意变量名：最好和 export default 导出的变量名一致（匿名函数除外）

import 任意变量名 from '路径'

  • 导入变量

import name from './test.js'

  • 导入匿名函数

import fn from './test.js'

3. 同时接收使用 export 和 export default 导出的参数

  • 固定写法

import 任意变量名, {xxx, xxx, ……} from '路径'

  • 例子

let name = 'Kevin';
let age = 18;
let obj = {a: 1, b: 2};

export {name, age}
export default obj

import obj, {name, age} from './test.js'


← 三点运算符 →